<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2-29$emit传值</title>
</head>
<body>
<div id="app">
  <parent></parent>
</div>
<template id="child">
  <div>
    <button @click="click">Send</button>
    <input type="text" v-model="message">
  </div>
</template>
</body>
<script src="./js/vue.js"></script>
<script>
  Vue.component('parent',{
    template:'<div><child @childFn="transContent"></child>from child component value {{message}}</div>',
    data(){
      return {
        message:""
      }
    },
    methods:{
      transContent(payload) {
        this.message=payload
      }
    }
  })
  Vue.component('child',{
    template: "#child",
    data() {
      return {
        message:"from child component message"
      }
    },
    methods:{
      click(){
        this.$emit('childFn',this.message)
      }
    }
  })
  new Vue({
    el:"#app"
  })
</script>
</html>